<template>
<div class="app">
  <button v-on:click="message='你好，李银河！'">修改message</button>
  <button @click="info.name='kobe'">修改info</button>
  <button @click="info.friend.name='jie'">修改info</button>
  <button @click="changeName">修改name</button>
</div>
</template>

<script>
import {ref, reactive, watch} from "vue";

export default {
  name: "App",
  setup(props,context){
    const message=ref('Hello World!!!')

    const name=ref('xixi')
    const age=ref(34)

    const changeName=()=>{
      name.value='james'
    }

    watch([name,age],(newVal,oldVal)=>{
      console.log(newVal,oldVal)
    },{
      immediate:true
    })

    const info=reactive({
      name:'why',
      age:19,
      friend:{
        name:'ding'
      }
    })

    watch(message,(newVal,oldVal)=>{
      console.log(newVal,oldVal)
    })

    watch(()=>({...info}),(newVal,oldVal)=>{
      console.log(newVal,oldVal)
    },{
      immediate:true,
      deep:true
    })

    return{
      info,
      message,
      changeName
    }
  }
}
</script>

<style scoped>

</style>